<template>
  <div class="city-list">
    <div class="section">
      <ul>
        <li class="introTitle" id="定位">定位城市</li>
        <div class="set-city">
          <div class="city-item" @click="visited(localCity,{id:70})">长沙</div>
        </div>
      </ul>

      <ul style="height:120px;">
        <li class="introTitle" id="最近">最近访问城市</li>
        <div class="history-big">
          <div
            class="history-city"
            v-for="(visitedCity,index) in visitedCitys"
            :key="index"
          >{{visitedCity}}</div>
        </div>
      </ul>
      <div class="hot-city">
        <p class="introTitle" id="热门">热门城市</p>
        <div class="hot-citys">
          <div
            class="city-item"
            v-for="(hot,index) in hots"
            :key="index"
            @click="visited(hot.regionName,hot)"
          >{{hot.regionName}}</div>
        </div>
      </div>

      <div v-for="(word,index) in words" :key="index" class="many-city">
        <!-- 遍历渲染,渲染出title A,B,C,D -->
        <p class="city-words" :id="word.title">{{word.title}}</p>
        <!-- 遍历所有all下的元素,all下每个数组的名字刚好是A,B,C,D -->
        <div
          v-for="(el,index) in all[word.title]"
          :key="index"
          class="city-item"
          @click="visited(el.regionName,el)"
        >{{el.regionName}}</div>
      </div>
    </div>
    <div class="big-nav">
      <a
        class="city-nav"
        v-for="(item,index) in nav"
        :key="index"
        @click="jump(item.title)"
      >{{item.title}}</a>
    </div>
  </div>
</template>

<script>
import citylist from '../../assets/json/city.js'
import pinyin from '../../assets/json/pinyin.js'
import nav from '../../assets/json/cityNav.js'

// import sortCity from './sortCity.vue'
export default {
  data: () => ({
    localCity: '长沙',
    citylist: [],
    hots: [],
    all: {},
    words: {},
    nav: {},
    visitedCitys: []
  }),
  created () {
    this.citylist = citylist
    this.getCityList()
    // console.log(this.all)
    this.words = pinyin.data.words
    this.nav = nav.data.words

    this.visitedCitys = JSON.parse(localStorage.getItem('visited') || '[]')
  },
  mounted () {
    // this.getPinYin()
  },
  methods: {
    getCityList () {
      const {
        msg,
        status,
        data: { hot, all }
      } = this.citylist
      if (status !== 0) return console.log(msg)
      this.hots = hot
      this.all = all
      // console.log(all)
    },
    jump (id) {
      // document.querySelector(id).scrollIntoView()
      console.log('点击了' + id)
      var _id = document.getElementById(id)
      window.scrollTo(0, _id.offsetTop + 40)
    },
    visited (el, item) {
      let isSame = false
      this.visitedCitys.forEach(item => {
        if (item === el) {
          isSame = true
        }
      })
      if (!isSame) {
        this.visitedCitys.push(el)
        localStorage.setItem('visited', JSON.stringify(this.visitedCitys))
      }
      if (this.visitedCitys.length > 6) {
        this.visitedCitys.splice(0, 1)
        localStorage.setItem('visited', JSON.stringify(this.visitedCitys))
      }
      this.$store.state.city = el
      this.$store.state.cityId = item.id
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.city-list {
  position: relative;
  background: #ebebeb;
  font-size: 14px;
  .section {
    width: 92%;
    height: auto;
    .set-city {
      background: #f5f5f5;
      height: 50px;
      .city-item {
        float: left;
        background: #fff;
        width: 28%;
        height: 33px;
        margin-top: 10px;
        margin-left: 3%;
        padding: 0 4px;
        border: 1px solid #e6e6e6;
        border-radius: 3px;
        line-height: 33px;
        text-align: center;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .history-city {
      background: #f5f5f5;
      height: 50px;
    }
    .hot-city {
      width: 100%;
      height: 210px;
      .hot-citys {
        background: #f5f5f5;
        width: 100%;
        height: 200px;
        // background: pink;
        // padding-right: 30px;
        // display: flex;
        // flex-wrap: wrap;
        // border-bottom: 1px solid #cccccc;
        .city-item {
          float: left;
          background: #fff;
          width: 28%;
          height: 33px;
          margin-top: 10px;
          margin-left: 3%;
          padding: 0 4px;
          border: 1px solid #e6e6e6;
          border-radius: 3px;
          line-height: 33px;
          text-align: center;
          box-sizing: border-box;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .many-city {
      background-color: #f5f5f5;
      width: 100%;
      height: auto;
      .city-words {
        width: 100%;
        height: 30px;
        background: #ebebeb !important;
        text-indent: 20px;
        line-height: 30px;
      }
      .city-item {
        margin: 0;
        padding: 0;
        height: 44px;
        line-height: 44px;
        margin-left: 15px;
        border-bottom: 1px solid #c8c7cc;
        font-size: 14px;
        background: #f5f5f5;
      }
    }
    .introTitle {
      margin-left: 15px;
      background: #ebebeb;
      height: 30px;
      line-height: 30px;
    }
    .history-big {
      height: 98px;
      background: #f5f5f5;
      .history-city {
        float: left;
        background: #fff;
        width: 28%;
        height: 33px;
        margin-top: 10px;
        margin-left: 3%;
        padding: 0 4px;
        border: 1px solid #e6e6e6;
        border-radius: 3px;
        line-height: 33px;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .big-nav {
    position: fixed;
    top: 15%;
    right: 0;
    width: 35px;
    z-index: 10;
    text-align: center;
    font-size: 12px;
    .city-nav {
      display: block;
    }
  }
}
</style>
